<template>
  <div>
    <div id="aplayer"></div>

    <div class="pagination">
      <li class="operation">
        <img src="@/assets/上一首.png" />
        <img v-if="showButton" @click="toStop" src="@/assets/运行.png" />
        <img v-else="showButton" @click="toStart" src="@/assets/暂停.png" />
        <img src="@/assets/下一首.png" />
        <img v-if="showUp"   @click="up" src="@/assets/点赞.png" />
        <img v-else="showUp" @click="down" src="@/assets/取消点赞.png" />
        <img v-if="showCollect" src="@/assets/收藏.png" @click="collect" />
        <img
          v-else="showCollect"
          @click="unCollect"
          src="@/assets/取消收藏.png"
        />
        <el-badge :value="200" :max="99" class="item">
          <img @click="toComments" src="@/assets/评论.png" />
        </el-badge>
      </li>
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import "aplayer/dist/APlayer.min.css";
import APlayer from "aplayer";
import { getSongList } from "@/api/original/index";
import { useRouter } from "vue-router";


const router = useRouter();
//页码改变逻辑
const changePage = (pageNumber) => {
  console.log(pageNumber);
};
//分页相关数据
const newsData = ref([]); //存放接收后端的数据

const listParam = ref({
  pageNum: "1", // 当前页 默认设值1
  pageSize: "10", // 每页显示条目 默认设置10
});

const total = ref(10); // 条目总数

//歌曲列表数据
const songList = ref([]);
onMounted(async () => {
  songList.value = [];
  const res = await getSongList(listParam.value);
  //总数
  total.value = res.newsData.total;
  //展示记录
  const records = res.newsData.records;
  for (var i = 0; i < records.length; i++) {
    //防止数组最后一个元素覆盖前面的元素，因为引用同一个对象，需要在循环中创建
    const songModule = ref({
      name: "",
      artist: "",
      url: "",
      cover: "",
    });
    songModule.value.name = records[i].songName;
    songModule.value.artist = records[i].artist;
    songModule.value.url = records[i].url;
    songModule.value.cover = records[i].cover;
    songList.value.push(songModule.value);
  }
  //数据拿到后再进行展示
  const ap = new APlayer({
    container: document.getElementById("aplayer"),
    audio: songList.value,
  });
});
//控制显示播放暂停
const showButton = ref(true);
//暂停
const toStop = () => {
  showButton.value = false;
};
//播放
const toStart = () => {
  showButton.value = true;
};

//控制显示收藏
const showCollect = ref(true);
//收藏
const collect = () => {
  showCollect.value = false;
};
//取消收藏
const unCollect = () => {
  showCollect.value = true;
};
//控制显示点赞
const showUp=ref(true)
//点赞
const up=()=>{
  showUp.value=false
}
//取消点赞
const down=()=>{
  showUp.value=true
}

//评论
const toComments=()=>{
      router.push('/comments')
}
</script>

<style lang="scss" scoped>
.pagination {
  position: relative;
  margin-bottom: 0%;
}
.operation {
  list-style-type: none;
  display: flex;
  justify-content: center;
}
img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
</style>
